<template>
  <view class="index">
    <view class="center">
      <view class="header">
        <text class="title">焦虑测评</text>
        <text class="subtitle">科学评估，了解自己的焦虑水平</text>
      </view>
      
      <view class="ind_from">
        <image class="banner" :src="banner" mode="widthFix"></image>
      </view>

      <view class="features">
        <view class="feature-item">
          <view class="feature-icon">📊</view>
          <text class="feature-text">专业量表</text>
        </view>
        <view class="feature-item">
          <view class="feature-icon">🔒</view>
          <text class="feature-text">隐私保护</text>
        </view>
        <view class="feature-item">
          <view class="feature-icon">⚡</view>
          <text class="feature-text">即时分析</text>
        </view>
      </view>

      <view class="description">
        <view class="desc-title">测评说明</view>
        <view class="desc-content">
          <text class="desc-item">• 本测评基于SAS焦虑自评量表</text>
          <text class="desc-item">• 共5个问题，约需3分钟完成</text>
          <text class="desc-item">• 请根据最近一周的实际感受作答</text>
        </view>
      </view>

      <view class="btn" @click="submit">
        <text class="btn-text">开始测评</text>
        <text class="btn-icon">→</text>
      </view>

      <view class="sub_text">
        <view class="p red">仅供娱乐 积极生活</view>
        <view class="p gray">本测试结果仅供参考，如有需要请咨询专业医生</view>
      </view>

      <view class="pub_ad_banner">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adDouyinHomeBottom"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adKuaishouHomeBottom"></ad>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
import { globalData } from "@/enums/dataEnums";
import {
  ad,
  adUnitIdDouyinHomeBottom,
  adUnitIdKuaishouHomeBottom,
} from "@/common/ad";
import sasBanner from "@/static/img/banner/sas_banner.jpg";
import sdsBanner from "@/static/img/banner/sds_banner.jpg";
import jiuxingBanner from "@/static/img/banner/jiuxing_banner.jpg";
import mbtiBanner from "@/static/img/banner/mbti_banner.jpg";
import jobInterestBanner from "@/static/img/banner/jobInterest_banner.jpg";
export default {
  data() {
    return {
      banner: null,
      adDouyinHomeBottom: adUnitIdDouyinHomeBottom,
      adKuaishouHomeBottom: adUnitIdKuaishouHomeBottom,
    };
  },
  onLoad(option) {
    switch (globalData.type) {
      case "mbti":
        this.banner = mbtiBanner;
        break;
      case "sds":
        this.banner = sdsBanner;
        break;
      case "sas":
        this.banner = sasBanner;
        break;
      case "jiuxing":
        this.banner = jiuxingBanner;
        break;
      case "jobInterest":
        this.banner = jobInterestBanner;
        break;
    }
  },
  methods: {
    submit() {
      uni.navigateTo({
        url: "/pages/index/quiz",
      });
    },
  },
};
</script>

<style lang="scss">
.banner {
  display: block;
  width: 100%;
}
.pub_radio {
  position: relative;
  padding-left: 50rpx;
}
.pub_radio:before {
  position: absolute;
  top: 50%;
  margin-top: -20rpx;
  left: 0;
  content: "";
  width: 40rpx;
  height: 40rpx;
  background-image: url("@/static/img/checked.png");
  background-size: cover;
}
.pub_radio.active:before {
  background-image: url("@/static/img/checked_active.png");
  background-size: cover;
}
.ind_from {
  background: #ffffff;
  margin: 30rpx 20rpx;
  border: none;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  .banner {
    width: 100%;
    border-radius: 16rpx 16rpx 0 0;
  }
}
.btn {
  margin: 40rpx 20rpx;
  background: linear-gradient(135deg, #ff4d4d 0%, #db0000 100%);
  color: #fff;
  text-align: center;
  padding: 24rpx 0;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: 600;
  box-shadow: 0 6rpx 16rpx rgba(219, 0, 0, 0.2);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(219, 0, 0, 0.2);
  }
}
.sub_text {
  text-align: center;
  padding: 20rpx 0;
  font-size: 26rpx;
  color: #999;
  .red {
    color: #ff4d4d;
    font-weight: 500;
  }
  .gray {
    color: #999;
    font-size: 24rpx;
    margin-top: 10rpx;
  }
}
.pub_ad_banner {
  margin: 40rpx 20rpx 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
}
.center {
  padding: 20rpx 0;
  background: #f8f9fa;
  min-height: 100vh;
}
.header {
  text-align: center;
  padding: 40rpx 0 20rpx;
  
  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
  }
}
.features {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 20rpx;
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .feature-icon {
      font-size: 48rpx;
      margin-bottom: 10rpx;
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8f9fa;
      border-radius: 50%;
    }
    
    .feature-text {
      font-size: 24rpx;
      color: #666;
    }
  }
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  
  .btn-text {
    font-size: 32rpx;
  }
  
  .btn-icon {
    font-size: 36rpx;
    transition: transform 0.3s ease;
  }
  
  &:active .btn-icon {
    transform: translateX(6rpx);
  }
}
.footer {
  text-align: center;
  padding: 40rpx 0 20rpx;
  
  .copyright {
    font-size: 24rpx;
    color: #999;
  }
}
.description {
  margin: 30rpx 20rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  .desc-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    text-align: center;
  }

  .desc-content {
    .desc-item {
      display: block;
      font-size: 26rpx;
      color: #666;
      line-height: 1.8;
      margin-bottom: 10rpx;
    }
  }
}
</style>

